<template>
    <view>
        <uni-segmented-control :current="menuIndex" :values="menuItems" style-type="text" active-color="#007aff" @clickItem="onClickItem" />
        <uni-list>
            <view v-if="menuIndex === 0">
                <uni-list-item v-for="(item, index) in groups" :key="index" :rightText="item.ggStat ? '已成团' : '未成团'" :thumb="item.ggAvat">
                    <template v-slot:body style="width: 250px">
                        <view style="font-size: 16px; font-weight: 600">{{ "团长：" + (item.ggWcna || "") + " - " + item.ggQuat + "人团 - 已拼" + item.member?.nodes?.length || 0 }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ "团长手机：" + (item.cust?.ciPhon || "") }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ "拼团项目：" + (item.item?.giName || "") }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ "发起时间：" + UTCTimeToLocal(item.ggStti) }}</view>
                    </template>
                </uni-list-item>
            </view>

            <view v-if="menuIndex === 1">
                <uni-list-item v-for="(item, index) in groups" :key="index" :rightText="item.ggStat ? '已成团' : '未成团'" :thumb="item.ggAvat">
                    <template v-slot:body style="width: 250px">
                        <view style="font-size: 16px; font-weight: 600">{{ "团长：" + (item.ggWcna || "") + " - " + item.ggQuat + "人团 - 已拼" + item.member?.nodes?.length || 0 }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ "团长手机：" + (item.cust?.ciPhon || "") }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ "拼团项目：" + (item.item?.giName || "") }}</view>
                        <view style="font-size: 12px; color: dimgrey">{{ "发起时间：" + UTCTimeToLocal(item.ggStti) }}</view>
                    </template>
                </uni-list-item>
            </view>
        </uni-list>
    </view>
</template>

<script>
import { getCustomerGroupByOrUuid } from "../../utils/api";
import { mapGetters } from "vuex";
export default {
    data() {
        return {
            menuItems: ["未成团", "已成团"],
            menuIndex: 0,
            groups: [],
        };
    },

    onLoad() {
        this.loadGroups({ ggStid: this.staffInfo.orUuid, gpUuid: this.activity.gpUuid, ggStat: false });
    },

    computed: {
        ...mapGetters({
            staffInfo: "personInfo/staffInfo",
            activity: "activityInfo/activity",
        }),
    },

    methods: {
        onClickItem(e) {
            if (this.menuIndex !== e.currentIndex) {
                this.menuIndex = e.currentIndex;
                if (e.currentIndex == 0) {
                    this.loadGroups({ ggStid: this.staffInfo.orUuid, gpUuid: this.activity.gpUuid, ggStat: false });
                }
                if (e.currentIndex == 1) {
                    this.loadGroups({ ggStid: this.staffInfo.orUuid, gpUuid: this.activity.gpUuid, ggStat: true });
                }
            }
        },
        async loadGroups({ ggStid, gpUuid, ggStat }) {
            let res = await getCustomerGroupByOrUuid({ ggStid, gpUuid, ggStat });
            this.groups = res || [];
        },
    },
};
</script>

<style lang="scss" scoped></style>
